<template>
	<div class="main-area center">
		<div class="main-item">
			<icon-svg class="svg" icon-class="icon-xinwen" />
			<p class="tip">协会新闻</p>
		</div>
		<div class="main-item">
			<icon-svg class="svg" icon-class="icon-kaoshi" />
			<p class="tip">考试中心</p>
		</div>
		<div class="main-item">
			<icon-svg class="svg" icon-class="icon-xuexi1" />
			<p class="tip">进修学习</p>
		</div>
		<div class="main-item">
			<icon-svg class="svg" icon-class="icon-tubiaozhizuomoban-" />
			<p class="tip">证书验证</p>
		</div>
		<div class="main-item">
			<icon-svg class="svg" icon-class="icon-gerenziliao2" />
			<p class="tip">个人中心</p>
		</div>
	</div>
</template>

<script>
	import IconSvg from 'components/global/icon-svg/main.vue';
	export default {
		name: 'mainArea',
		components: {
			IconSvg
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '../../../style/base.less';

	.main-area {
		padding: 20px 0;
		.main-item {
			font-size: 100px;
			flex: 1;
			text-align: center;
			.svg {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: @main-color;
			}
			.tip {
				font-size: 20px;
			}
		}
	}
</style>
